<template>
  <el-dialog :visible.sync="visible" center width="1200px" class="sales_forecasts_info" @close="handleCancel">
    <div v-loading="loading">

      <div class="header_title_box">
        <h2>基本信息</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form label-width="88px">
                <el-form-item label="选择年份">
                  <el-input v-model="info.year" :disabled="true" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="header_title_box">
        <h2>商品明细信息</h2>
      </div>
      <div v-loading="loading" class="mb24">
        <el-table :data="info.products" border max-height="190">
          <el-table-column label="缩略图" align="center" width="120">
            <template slot-scope="scope">
              <thund :img="scope.row.goods_pic | shopThund" />
            </template>
          </el-table-column>
          <el-table-column label="系统sku" align="center" prop="goods_code" width="125" />
          <el-table-column label="中文名称" align="center" prop="goods_name" width="125" />
          <el-table-column label="英文名称" align="center" prop="goods_name_en" width="125" />
          <el-table-column label="商品分类" prop="category_name" align="center" width="96" />
          <el-table-column v-for="item in monthList" :key="item.id" :label="item.label" :prop="item.key" align="center" min-width="90" />
        </el-table>
      </div>
      <div class="dialog-footer-center">
        <span>
          <el-button type="primary" @click="handleCancel">返回</el-button>
        </span>
      </div>
      <span slot="footer" />
    </div>
  </el-dialog>
</template>

<script>
import thund from '@/components/base/thund'
export default {
  name: 'SalesForecastsInfo',
  components: {
    thund
  },
  data() {
    return {
      id: '',
      info: {},
      visible: false,
      loading: false,
      monthList: [
        {
          id: 11,
          label: '1月',
          key: 'jan'
        },
        {
          id: 12,
          label: '2月',
          key: 'feb'
        },
        {
          id: 13,
          label: '3月',
          key: 'mar'
        },
        {
          id: 14,
          label: '4月',
          key: 'apr'
        },
        {
          id: 15,
          label: '5月',
          key: 'may'
        },
        {
          id: 16,
          label: '6月',
          key: 'jun'
        },
        {
          id: 17,
          label: '7月',
          key: 'jul'
        },
        {
          id: 18,
          label: '8月',
          key: 'aug'
        },
        {
          id: 19,
          label: '9月',
          key: 'sept'
        },
        {
          id: 20,
          label: '10月',
          key: 'oct'
        },
        {
          id: 21,
          label: '11月',
          key: 'mov'
        },
        {
          id: 22,
          label: '12月',
          key: 'dec'
        }
      ]
    }
  },
  computed: {},
  created() {},
  methods: {
    // 显示
    show(id) {
      const vm = this
      vm.visible = true
      vm.loading = true
      vm.$http
        .get(`/sales-forecasts/${id}`)
        .then((res) => {
          vm.info = res.data
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    handleCancel() {
      const vm = this
      vm.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.sales_forecasts_info {
  .filter-container {
    padding-bottom: 0;
    border: none;
  }
}
.sales_forecasts_info ::v-deep .el-dialog__header {
  padding: 0;
}
.sales_forecasts_info ::v-deep .el-dialog__body {
  padding: 16px 16px 14px;
}
</style>
